<template>
	<div class="YC-table">
		<el-table
			style="width: 100%"
			:data="tableData"
			:border="border"
			v-loading="loading"
			@selection-change="handleSelectionChange"
			v-bind="$attrs"
			v-on="$listeners">
			<el-table-column v-if="select" type="selection" :selectable="selectable" width="55"> </el-table-column>
			<slot></slot>
		</el-table>
		<div class="YC-table__bottom" v-if="hasBottom">
			<div class="YC-table__bottom-slot">
				<slot name="bottom"></slot>
			</div>
			<el-pagination
				class="YC-table__pagination"
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="pageSize"
				:current-page.sync="currentPage"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"></el-pagination>
		</div>
	</div>
</template>

<script>
/**
 * 组件说明-
 * url：初始化请求的url
 * border：是否需要分割线
 * select：是否显示多选栏
 * maxHeight：table最大高度，暂时无用
 * hasBottom:是否有底部
 */
import { Table, Pagination } from "element-ui";
import request from "../../utils/request";


export default {
	name: "YcTable",
	inheritAttrs: false,

	components: {
		ElTable: Table,
		ElPagination: Pagination
	},
	props: {
		url: String,
		maxHeight: [Number, String],
		select: {
			type: Boolean,
			default: false
		},
		border: {
			type: Boolean,
			default: true
		},

		hasBottom: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		innerMaxHeight() {
			return this.maxHeight || this.wrapHeight - 53;
		}
	},
	data() {
		return {
			tableData: [
				{
					vin: ""
				}
			], // table的数据源
			currentPage: 1,
			pageSize: 20,
			total: 0,
			params: {}, // 记录loadData参数
			loading: false,
			wrapHeight: 0 // table容器的高度
		};
	},
	mounted() {
		this.wrapHeight = this.$el.offsetHeight;
	},
	methods: {
		/**
		 * ----------------------------初始化函数----------------------------
		 */
		// 父组件手动执行，初始化函数
		async loadData(params = {}) {
			// 合并新老参数
			this.params = Object.assign(this.hasBottom ? { pageNo: 1, pageSize: 20 } : {}, this.params, params);
			if (this.params.startDate === "") {
				delete this.params.startDate;
			}
			if (this.params.endDate === "") {
				delete this.params.endDate;
			}
			const { pageNo, pageSize } = this.params;
			this.currentPage = pageNo;
			this.pageSize = pageSize;
			this.loading = true;
			try {
				let { data } =await request({
								url: this.url,
								method: "get",
								params: this.params})	
				if (data) {
					const { items, totalNumber } = data;
					this.tableData = Array.isArray(items) ? items : [];
					this.total = totalNumber;
				}
			} catch (error) {
				this.loading = false;
			}
			this.loading = false;
		},
		/**
		 * ----------------------------事件函数----------------------------
		 */

		// table 多选事件
		handleSelectionChange(val) {
			this.$emit("choeseCar", val);
		},
		// 切换页码
		handleCurrentChange(page) {
			this.loadData({
				pageNo: page
			});
		},
		// 切换pageSize
		handleSizeChange(size) {
			this.loadData({
				pageNo: 1,
				pageSize: size
			});
		},

		/**
		 * ----------------------------工具函数----------------------------
		 */
		// table 中决定这一行的 CheckBox 是否可以勾选
		selectable(row) {
			return row.price !== "";
		}
	}
};
</script>

<style lang="scss" scoped>
.YC-table__bottom {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #ebeef5;
	border-top: none;
}
</style>
